<template>
 <div class="home-container">
   <van-tabs v-model="activeIndex">
      <van-tab v-for="channel in channelList" :title='channel.name' :key="channel.id">
        <div class="scroll-wrapper">
            <article-list :my-channel='channel'></article-list>
        </div>
      </van-tab>
   </van-tabs>
     <!-- 准备点击按钮 -->
    <div class="bar-btn" @click="showChannelEdit = true">
      <van-icon name="wap-nav"/>
    </div>
    <!-- 使用action-sheet组件 -->
    <van-action-sheet v-model="showChannelEdit" get-container="body">
       <channel-edit
       :my-channels="channelList"
       @chose-channel="choseChannel">
       </channel-edit>
    </van-action-sheet>
 </div>
</template>

<script>
import { getChannels } from '@/api/channels'
import ArticleList from './ArticleList'
import ChannelEdit from './ChannelEdit'
export default {
  name: 'Home',
  data () {
    return {
      channelList: [], // 频道列表
      showChannelEdit: false, // sheet 是否显示
      activeIndex: null // 当前激活的项目下标值
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  mounted () {
    this.hGetChannels()
  },
  methods: {
    // 获取频道列表
    hGetChannels () {
      getChannels().then(res => {
        console.log(res)
        this.channelList = res.data.data.channels
      })
    },
    // 接受子组件传过来的index,并且赋值给 activeIndex
    choseChannel (index) {
      console.log('从子组件传过来的index', index)
      this.activeIndex = index
      // 关闭弹框
      this.showChannelEdit = false
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  /deep/.van-tabs__line {
    background-color: #3196fa;
  }
  // 专门为列表区域腾出一块空间
  /deep/.van-tabs__content{
    position: fixed;
    top: 96px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
  }
  .bar-btn {
        position: fixed;
        right: 5px;
        top: 57px;
        display: flex;
        align-items: center;
        background-color: #fff;
        opacity: 0.8;
        z-index:1;
        .van-icon-wap-nav{
          font-size: 20px;
        }
      }
}
</style>
